<template>
<div class="wrapper">
  <div class="title">
    <img src="../assets/img-socialRecruitment/social-recru.png" alt />
    <span class="job-en">SOCIAL RECRUITMENT</span>
  </div>
  <div class="content">
    <div class="jobWrapper" v-if="tab==='job'">
      <div class="jobSearch-Content">
        <div class="jobSelector">
          <a-select class="city-selector" default-value="工作地点" style="width: 290px;height:50px" @change="(value) => handleChange(value, 'jobarea')">
            <a-select-option :value="item.key" v-for="(item,index) in address" :key="index">{{item.value}}</a-select-option>
          </a-select>
          <a-select class="city-selector" default-value="职能部门" style="width: 290px;height:50px" @change="(value) => handleChange(value, 'divid')">
            <a-select-option :value="item.key" v-for="(item,index) in department" :key="index">{{item.value}}</a-select-option>
          </a-select>

          <input type="text" placeholder="请输入职位关键词" @keyup="e => handleChange(e.target.value, 'keyword')" />

          <div class="job-search">
            <img src="../assets/img-pc/search.png" alt />
          </div>
        </div>
        <div class="jobTipsContent">
          <span>
            根据您的搜索，为您搜索到
            <span class="job-tips">10</span>个职位
          </span>
        </div>
      </div>

      <div class="jobList">
        <div class="jobItem" v-for="(item,index) in jobList" :key="index" @click="showDetail(item)">
          <span class="jobItem-name">{{item.jobname}}</span>
          <span class="jobItem-delivery">
            查看详情
            <span class="jobItem-delivery-img"></span>
          </span>
        </div>

        <a-pagination v-if="total > 10" :total="total" @change="selector.pagenum = $event" class="pager" />
      </div>
    </div>
    <Detail v-if="tab === 'detail'" :jobid="curDetail" @post="post($event)" @back="showList()" />
  </div>
</div>
</template>

<script>
import jsonp from "../assets/jsonp";
import Detail from './detail';
import getQuery from '../assets/getQuery'
export default {
  data() {
    return {
      jobList: [],
      address: [],
      department: [],
      areaId: "020000",
      partId: "",
      timer: -1, // keyword 防抖
      total: 0,
      selector: {
        ctmid: "4116719",
        jobarea: "",
        divid: "",
        keyword: "",
        pagenum: 1,
        pagesize: 10,
      },
      tab: 'job',
      curDetail: '1'
    };
  },
  watch: {
    selector: {
      // 监听selector的变化，触发 research
      handler: function (_new, old) {
        console.log(old, _new);
        if (old.keyword !== _new.keyword) {
          clearTimeout(this.timer);
          // 使用最新的selector获取职位列表
          this.timer = setTimeout(() => {
            this.search();
          }, 500);
        } else {
          this.search();
        }
      },
      deep: true,
    },
  },
  methods: {
    handleChange(value, key) {
      this.selector[key] = value;
      this.selector.pagenum = 1;
    },
    search() {
      coapi.getJobList(this.selector, (res) => {
        console.log(res);
        this.jobList = res.resultbody.joblist;
        // console.log(this.jobList);
        this.total = Number(res.resultbody.totalnum);
      });
    },
    showDetail(item) {
      this.curDetail = item.jobid;
      this.tab = 'detail';
    },
    showList() {
      this.tab = 'job';
    },
    post(jobid) {
      // window.location.href = `http://xyz.51job.com/external/apply.aspx?jobid=${jobid}&ctmid=4821360`;
      jsonp(
        `https://i.51job.com/delivery/platform/delivery_api.php?jobid=${jobid}`,
        "jobCallback"
      ).then((res) => {
        let status = res.status;
        if (status == "1") {
          let status2 = res.result[jobid].status;

          if (status2 == "-103" || status == "-102" || status == "-2") {
            window.parent.location.href = res.result[jobid].result;
          }
          if (status2 == "-101") {
            alert("7天内请勿重复投递");
          }
          if (status2 == "-100") {
            alert("职位已经过期");
          }
          if (status2 == "1") {
            alert("投递成功!");
          }
        }
        if (status == "-2") {
          alert("您未登录，请登录后返回");
          // window.location.href =
          //   "http://login.51job.com/login.php?url=" + window.location.href;

          window.parent.location.href =
            "http://login.51job.com/login.php?url=" +
            window.parent.location.href;

          // window.parent.location.href = `http://xyz.51job.com/external/apply.aspx?jobid=${jobid}&ctmid=${ctmid}`
        }
        if (status == "-5") {
          alert("您的账号中无简历，请先填写简历");
          window.parent.location.href =
            "https://i.51job.com/resume/tri_resume.php";
        }
      });
    },
  },
  components: {
    Detail
  },
  mounted() {
    // 如果query参数中带有jobid则直接显示该职位详情
    const {
      jobid
    } = getQuery();

    if (jobid) {
      this.showDetail({
        jobid
      })
    }
    // 正常业务逻辑
    this.search();
    coapi.getJobCondition(4116719, (res) => {
      this.address = [{
          key: "",
          value: "地点不限"
        },
        ...res.resultbody.jobarea.filter(
          (item) => item.value.indexOf("省") < 0
        ),
      ];
      this.department = [{
          key: "",
          value: "职能部门不限"
        },
        ...res.resultbody.divid,
      ];
    });
  },
};
</script>

<style lang="less">
.wrapper {
  width: 1200px;
  margin: 0 auto;
  background-color: rgb(235 240 244);
  padding-top: 70px;
  padding-bottom: 50px;

  .title {
    width: 100%;
    height: 115px;
    text-align: center;

    img {
      display: block;
      height: 76px;
      margin: 0 auto;
      margin-bottom: 16px;
    }

    span {
      display: block;
      height: 23px;
      line-height: 23px;
    }

    .job-en {
      font-size: 30px;
      font-weight: Bold;
      font-family: NotoSansCJKsc-Bold;
      color: #dedede;
    }
  }

  .content {
    width: 100%;

    .jobWrapper {
      margin-top: 40px;
      width: 1200px;
      display: flex;
      flex-direction: column;

      .jobSearch-Content {
        width: 100%;
        font-size: 16px;
        display: flex;
        flex-direction: column;

        .jobSelector {
          display: flex;
          flex-direction: row;

          .ant-select-selection--single {
            height: 100%;
            line-height: 50px;
          }

          .ant-select-selection__rendered {
            line-height: 50px;
          }

          .city-selector {
            display: block;
            width: 290px;
            height: 50px;
            line-height: 50px;
            margin-left: 20px;

            &:first-child {
              margin-left: 0;
            }
          }

          input {
            display: block;
            height: 50px;
            width: 475px;
            margin-left: 20px;
            line-height: 50px;
            border: none;
            color: #999999;
          }

          .job-search {
            display: block;
            height: 50px;
            width: 105px;
            line-height: 50px;
            border: none;
            text-align: center;
            background-color: #005bac;
            color: white;

            img {
              display: inline-block;
              width: 26px;
              height: 28px;
              color: white;
            }
          }
        }

        // .jobSelector {
        //   height: 50px;
        //   width: 360px;
        //   background-color: white;
        //   margin-top: 10px;
        //   &:first-child {
        //     margin-top: 0px;
        //   }
        //   .jobArea {
        //     height: 50px;
        //     width: 317px;
        //     margin: 0 20px 0 23px;
        //     line-height: 50px;
        //     text-align: center;
        //     border: none;
        //   }
        //   .jobDepartment {
        //     height: 50px;
        //     width: 317px;
        //     margin: 0 20px 0 23px;
        //     line-height: 50px;
        //     text-align: center;
        //     border: none;
        //   }
        // }

        .jobTipsContent {
          display: block;
          height: 16px;
          width: 100%;
          margin: 40px auto;
          line-height: 16px;
          border: none;
          text-align: center;

          .job-tips {
            color: #1286ee;
          }
        }
      }

      .jobList {
        width: 1200px;

        .jobItem {
          width: 100%;
          height: 70px;
          margin-top: 6px;
          display: flex;
          flex-direction: row;
          background-color: #ffffff;
          position: relative;
          cursor: pointer;

          &:first-child {
            margin-top: 0;
          }

          &:hover {
            background-color: #005bac;

            .jobItem-name {
              color: #fff;
            }

            .jobItem-delivery {
              color: #fff;
            }

            .jobItem-delivery-img {
              background-image: url("../assets/img-socialRecruitment/right-arrow-white.png") !important;
            }
          }

          .jobItem-name {
            display: inline-block;
            margin: 24px 0 26px 24px;
            height: 20px;
            line-height: 20px;
            font-size: 20px;
            color: #333333;
          }

          .jobItem-delivery {
            display: inline-block;
            margin: 27px 24px 27px 0;
            width: 150px;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            text-align: center;
            color: #666666;
            position: absolute;
            right: 0;

            .jobItem-delivery-img {
              display: inline-block;
              margin: 0 0 0 39px;
              width: 34px;
              height: 9px;
              background-image: url("../assets/img-socialRecruitment/right-arrow-black.png");
              background-size: 100% 100%;
            }
          }
        }

        .pager {
          margin-top: 20px;
          text-align: center;
        }
      }
    }
  }

  // .jobArea {
  //   height: 50px;
  //   width: 360px;
  // }
  // .jobDepartment {
  //   height: 50px;
  //   width: 360px;
  // }
}
</style>
